import {
  Button,
  Form,
  Input,
} from 'antd';
import React from 'react';
import {connect, history} from 'umi';
import {stringify} from 'querystring';

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 4,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 20,
    },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 20,
      offset: 4,
    },
  },
};

const ModifyPassForm = (props) => {

  const {submitting, dispatch} = props;
  const [form] = Form.useForm();

  const onFinish = () => {
    form.validateFields().then(values => {
      if (submitting) {
        return;
      }
      let keys = Object.keys(values);
      keys.forEach(d => {
        values[d] = values[d] === null ? undefined : values[d];
      });
      dispatch({
        type: 'PUcenter/modifyPass',
        payload: values,
        callback: () => {
          onReset();
          setTimeout(() => {
            let code = window.localStorage.getItem('code') || '';
            window.localStorage.clear();
            const {search, pathname} = window.location;
            history.replace({
              pathname: '/login',
              search: stringify({code, redirect: pathname + search}),
            });
          }, 1500);
        },
      });
    });
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <Form
      {...formItemLayout}
      form={form}
      onFinish={onFinish}
      initialValues={{}}
      style={{maxWidth: 600, padding: '24px 0'}}
      scrollToFirstError
    >
      <Form.Item
        name='currentPass' label='当前密码' hasFeedback
        rules={[{required: true, whitespace: true, message: '当前密码不能为空！'}]}
      >
        <Input.Password placeholder={'请输入当前密码'}/>
      </Form.Item>

      <Form.Item
        name='newPass' label='新的密码' hasFeedback
        rules={[{required: true, whitespace: true, message: '新的密码不能为空！'}]}
      >
        <Input.Password placeholder={'请输入新的密码'}/>
      </Form.Item>

      <Form.Item
        name='confirmPass' label='确认密码' hasFeedback
        dependencies={['newPass']}
        rules={[{required: true, whitespace: true, message: '确认密码不能为空！'},
          ({getFieldValue}) => ({
            validator(_, value) {
              if (!value || getFieldValue('newPass') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('确认密码与新的密码不匹配!'));
            },
          })]}
      >
        <Input.Password placeholder={'请输入确认密码'}/>
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        <Button type='primary' loading={submitting} htmlType='submit' style={{marginRight: 8}}>提交</Button>
        <Button htmlType='button' onClick={onReset}>重置</Button>
      </Form.Item>
    </Form>
  );
};

export default connect(({loading}) => {
  return {
    submitting: loading.effects['PUcenter/modifyPass'],
  };
})(ModifyPassForm);
